<template>
  <div class="screen overview page-content">
    <screen-header :title="banner.name" :is-home="false"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="18" class="ibox-group">
          <div class="ibox box1-1 bgh" style="background: none;">
            <div class="ibox-body" style="padding: 0;margin-left: -1.2vw;">
              <img src="../assets/images/chart-images/trans1_1.png" style="width: 100%;height: 100%;" alt="">
            </div>
          </div>
          <div class="fx-box">
            <div class="ibox box1-2 fx-1" style="margin-right: 2vh;">
              <div class="ibox-header">
                <span class="ibox-title">运输类型销售占比（月度）</span>
              </div>
              <div class="ibox-body">
                <img src="../assets/images/chart-images/trans1_2.png" alt="">
              </div>
            </div>
            <div class="ibox box1-3 fx-1">
              <div class="ibox-header">
                <span class="ibox-title">今日运输任务时段监控</span>
              </div>
              <div class="ibox-body">
                <img src="../assets/images/chart-images/trans1_3.png" alt="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box2-1">
            <div class="ibox-header">
              <span class="ibox-title">本月各科室运输量监控（TOP6）</span>
            </div>
            <div class="ibox-body text-center">
              <img src="../assets/images/chart-images/trans2_1.png" alt="">
            </div>
          </div>
          <div class="ibox box2-2">
            <div class="ibox-header">
              <span class="ibox-title">今日运输工单监控</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/trans2_2.png" alt="">
            </div>
          </div>
          <div class="ibox box2-3">
            <div class="ibox-header">
              <span class="ibox-title">今日运输任务时段监控</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/trans2_3.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="ibox box3-1 bgh2">
        <div class="ibox-header">
          <span class="ibox-title">中央运输数据总览</span>
        </div>
        <div class="ibox-body">
          <div class="horizontal-overview5">
            <div>
              <p>本年总任务量</p>
              <h4 class="num">
                <animate-number v-if="overData.data0" from="0" :to="overData.data0" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
            </div>
            <div>
              <p>环比增长</p>
              <h4 class="num">
                <small style="margin-right: -0.4vw;">+</small>
                <animate-number v-if="overData.data1" from="0" :to="overData.data1" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
                <small style="margin-left: -0.4vw;">%</small>
              </h4>
            </div>
            <div>
              <p>本月总任务量</p>
              <h4 class="num">
                <animate-number v-if="overData.data2" from="0" :to="overData.data2" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
            </div>
            <div>
              <p>今日总任务量</p>
              <h4 class="num">
                <animate-number v-if="overData.data3" from="0" :to="overData.data3" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
            </div>
            <div>
              <p>今日任务完成量</p>
              <h4 class="num">
                <animate-number v-if="overData.data4" from="0" :to="overData.data4" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
            </div>
            <div>
              <p>任务完成率</p>
              <h4 class="num">
                <animate-number v-if="overData.data5" from="0" :to="overData.data5" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
                <small style="margin-left: -0.4vw;">%</small>
              </h4>
            </div>
            <div>
              <p>服务满意度</p>
              <h4 class="num">
                <animate-number v-if="overData.data6" from="0" :to="overData.data6" :duration="1000"
                  easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
                <small style="margin-left: -0.4vw;">%</small>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      overData: {},
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        this.overData = {};
        this.initData();
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    turnPage(index, name) {
      this.$emit("change", index);
    },
    initData() {
      setTimeout(() => {
        this.overData = {
          data0: 9548,
          data1: 15,
          data2: 548,
          data3: 48,
          data4: 48,
          data5: 100,
          data6: 98,
        };
      }, 100)
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .box1-1 {
    height: 43vh;
  }

  .box1-2 {
    height: 30vh;
  }

  .box1-3 {
    height: 30vh;
  }

  .box2-1 {
    height: 24vh;
  }

  .box2-2 {
    height: 23vh;
  }

  .box2-3 {
    height: 24vh;
  }


  .box3-1 {
    height: 12vh;
  }
}
</style>